<template>
  <div class="home" :style="'top:' + paddingTop + 'px'" ref="wrapper">
    <div class="top-head">
      <div class="m-menu">
        <van-tabs class="tabs" sticky swipeable animated>
          <van-tab
            :title="c.name"
            v-for="c in cates"
            :key="c.val"
            :name="c.val"
          >
            <vl :cate="c.name" />
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import vl from "../components/VideoList";
export default {
  components: { vl },
  name: "video-page",
  data() {
    return {
      cates: [
        { name: "国产视频", val: "国产视频" },
        { name: "欧美视频", val: "欧美视频" },
        { name: "日韩视频", val: "日韩视频" },
        { name: "另类视频", val: "另类视频" },
        { name: "动漫视频", val: "动漫视频" }
      ]
    };
  },
  activated() {
    this.$refs.wrapper.scrollTop = this.scroll;
    this.$refs.wrapper.addEventListener("scroll", this.saveScroll);
  },
  deactivated() {
    this.$refs.wrapper.removeEventListener("scroll", this.saveScroll);
  },
  created() {
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
  },
  mounted() {
    this.$refs.wrapper.addEventListener("scroll", this.saveScroll);
  },
  methods: {
    saveScroll() {
      this.scroll = this.$refs.wrapper.scrollTop;
    }
  }
};
</script>

<style lang="less">
.home {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.top-head {
  a {
    color: #e8575d;
  }
  .m-menu {
    .tabs {
      display: inline-block;
      width: 375px;
      .van-tab {
        flex-basis: 20% !important;
      }
      .van-tabs__wrap {
        border-width: 0 !important;
      }
      .van-tabs__wrap::after {
        border-width: 0 !important;
      }
      .van-tab--active {
        color: #e8575d !important;
        font-weight: bold;
        font-size: 18px;
        transition: 50ms;
      }
      .van-ellipsis {
        overflow: visible !important;
      }
      .van-tabs__line {
        background-color: #e8575d;
      }
    }
  }
}
</style>
